<template>
  <!-- 游戏指南 -->
  <div class="GameHelp" :style="{ height: HelpData.height + 'px' }">
    <h2>游戏玩法</h2>
    <p>
      <b>pc端：</b>
      上下左右
      <el-image style="width: 100px; height: 80px" :src="HelpData.src"></el-image>,暂停空格键
    </p>
    <p>
      <b>移动端：</b>上下左右点击下面按键
    </p>
    <p>
      <b>设置：</b>旁边红色按钮
    </p>
    <el-button round class="btn" @click="Show">游戏开始</el-button>
  </div>
  <!-- 游戏设置 -->
  <div class="Gameset" v-show="HelpData.IsShow">
    <h2>游戏设置</h2>
    <div class="SetSpeed">
      <span>速度：</span>
      <el-slider class="speed" v-model="elData.value1"></el-slider>
    </div>
    <div class="SetSpeed">
      <span>难度：</span>
      <el-slider class="speed" v-model="elData.value2"></el-slider>
    </div>
    <div class="SetInvincible">
      <span>无敌模式：</span>
      <el-switch v-model="elData.value3" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </div>
    <div class="current">
      <div>
        <div>当前难度</div>
        <el-progress type="dashboard" :percentage="elData.percentage1" :color="elData.colors1"></el-progress>
      </div>
      <div>
        <div>当前速度</div>
        <el-progress type="dashboard" :percentage="elData.percentage" :color="elData.colors"></el-progress>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue-demi';
import { HelpData, elData } from '../hoos/UseHelp'


function Show() {
  // HelpData.height == 400 ? HelpData.height = 0 : HelpData.Height = 30
  if (HelpData.height == 400) {
    HelpData.height = 0;
    HelpData.Height = 30
  }
}
</script>

<style scoped lang="less">
.GameHelp,
.Gameset {
  position: absolute;
  top: 9%;
  width: 510px;
  height: 400px;
  background-color: white;
  // margin: 60px 50%;
  // transform: translateX(-51.5%);
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;

  h2 {
    text-align: center;
  }
  p {
    padding-left: 2em;
  }
  .btn {
    width: 24%;
    align-self: flex-end;
    margin: 10px;
  }
}
.Gameset {
  background-color: rgba(225, 225, 225, 0.7);
  .SetSpeed {
    display: flex;
    align-content: space-between;
    padding-left: 5%;
    padding-right: 5%;
    align-content: center;
    span {
      width: 15%;
      line-height: 38px;
    }
    .speed {
      width: 85%;
    }
  }
  .SetInvincible {
    display: flex;
    padding-left: 5%;
    padding-right: 5%;
    justify-content: space-between;
  }
  .current {
    display: flex;
    flex-direction: row;
    padding-left: 5%;
    padding-right: 5%;
    justify-content: space-between;
    text-align: center;
  }
}
</style>
